<!-- src/components/Footer.vue -->
<template>
  <el-footer class="footer-container">
    <div class="container">
      <!-- Main Footer Content -->
      <el-row :gutter="24" class="footer-content">
        <!-- Terms & Conditions -->
        <el-col :xs="24" :sm="24" :md="6">
          <div class="footer-section">
            <h3 class="footer-title">Terms & Policies</h3>
            <el-menu
              class="footer-menu"
              mode="vertical"
              background-color="transparent"
              text-color="#A3A3A3"
              active-text-color="#409EFF"
              router
            >
              <el-menu-item index="/policies/terms-of-use">Terms of Use</el-menu-item>
              <el-menu-item index="/policies/refund-policy">Refund Policy</el-menu-item>
              <el-menu-item index="/policies/shipping-policy">Shipping Policy</el-menu-item>
            </el-menu>
          </div>
        </el-col>

        <!-- Contact Information -->
        <el-col :xs="24" :sm="24" :md="6">
          <div class="footer-section">
            <h3 class="footer-title">Contact Us</h3>
            <el-descriptions :column="1" size="small" border>
              <el-descriptions-item label="Address">
                <el-text class="mx-1">123 Toy & Drone Street</el-text>
              </el-descriptions-item>
              <el-descriptions-item label="City">
                <el-text class="mx-1">New York, NY 10001</el-text>
              </el-descriptions-item>
              <el-descriptions-item label="Phone">
                <el-text class="mx-1">1-800-TOY-DRONE</el-text>
              </el-descriptions-item>
              <el-descriptions-item label="Email">
                <el-text class="mx-1">support@toydrone.com</el-text>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-col>

        <!-- Data Privacy -->
        <el-col :xs="24" :sm="24" :md="6">
          <div class="footer-section">
            <h3 class="footer-title">Privacy & Security</h3>
            <el-menu
              class="footer-menu"
              mode="vertical"
              background-color="transparent"
              text-color="#A3A3A3"
              active-text-color="#409EFF"
              router
            >
              <el-menu-item index="/policies/privacy-policy">Data Privacy Policy</el-menu-item>
              <el-menu-item index="/policies/cookie-policy">Cookie Policy</el-menu-item>
              <el-menu-item index="/policies/ssl-info">SSL Certificate Info</el-menu-item>
            </el-menu>
          </div>
        </el-col>

        <!-- Export Restrictions -->
        <el-col :xs="24" :sm="24" :md="6">
          <div class="footer-section">
            <h3 class="footer-title">Export Information</h3>
            <el-menu
              class="footer-menu"
              mode="vertical"
              background-color="transparent"
              text-color="#A3A3A3"
              active-text-color="#409EFF"
              router
            >
              <el-menu-item index="/policies/export-restrictions">Export Restrictions</el-menu-item>
              <el-menu-item index="/policies/shipping-countries">Shipping Countries</el-menu-item>
              <el-menu-item index="/policies/international-orders">International Orders</el-menu-item>
            </el-menu>
          </div>
        </el-col>
      </el-row>

      <!-- Social Media Links -->
      <el-divider />
      <!-- <div class="social-links">
        <el-space wrap size="large">
          <el-button circle type="primary">
            <el-icon><Platform /></el-icon>
          </el-button>
          <el-button circle type="success">
            <el-icon><Share /></el-icon>
          </el-button>
          <el-button circle type="warning">
            <el-icon><Star /></el-icon>
          </el-button>
          <el-button circle type="danger">
            <el-icon><VideoPlay /></el-icon>
          </el-button>
        </el-space>
      </div> -->

      <!-- Copyright -->
      <div class="copyright">
        <el-text class="mx-1" size="small" type="info">
          &copy; 2024 Toy & Drone Shop. All rights reserved.
        </el-text>
        <br />
        <el-text class="mx-1" size="small" type="info">
          We are committed to providing you with the highest quality toys and drones
        </el-text>
      </div>
    </div>
  </el-footer>
</template>

<script setup lang="ts">
import {
  Platform,
  Share,
  Star,
  VideoPlay,
} from '@element-plus/icons-vue'
</script>

<style scoped>
.footer-container {
  background: var(--el-bg-color-overlay);
  padding: 48px 0;
  height: auto !important;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-content {
  margin-bottom: 40px;
}

.footer-section {
  margin-bottom: 30px;
}

.footer-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.footer-menu {
  border-right: none;
}

.footer-menu .el-menu-item {
  height: 40px;
  line-height: 40px;
  padding: 0 !important;
}

.footer-menu .el-menu-item:hover {
  background-color: transparent !important;
  color: var(--el-color-primary) !important;
}

.social-links {
  text-align: center;
  margin: 30px 0;
}

.copyright {
  text-align: center;
  margin-top: 30px;
}

:deep(.el-descriptions) {
  --el-descriptions-table-border: var(--el-border-color-lighter);
  --el-descriptions-item-bordered-label-background: transparent;
}

:deep(.el-descriptions__cell) {
  background-color: transparent !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .footer-section {
    text-align: center;
  }

  .footer-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  :deep(.el-descriptions__label) {
    text-align: center !important;
  }

  :deep(.el-descriptions__content) {
    text-align: center !important;
  }
}
</style> 